import { GetQuestionListApi } from '@/api';
import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import Choice from './components/Choice';
import Fill from './components/Fill';
import './practice.less';
import ArticleIcon from '@mui/icons-material/Article';
import StarBorderIcon from '@mui/icons-material/StarBorder';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

const ChoiceTypes = ['many', 'one', 'check'];

export default function Practice() {
  const location = useLocation();
  const [list, setList] = useState<IPracticeList[]>([]);

  useEffect(() => {
    GetQuestionListApi(location.state as IDataParams).then((res) => {
      if (res.errCode === 0) {
        setList(res.data);
      }
    });
  }, []);

  const [curIndex, setCurIndex] = useState(0);

  return (
    <div className="practice">
      <div className="top-bar">
        <section className="left">
          <ArticleIcon />
          <span>{curIndex + 1}</span>
          <span>/</span>
          <span>{list.length}</span>
        </section>
        <section className="right">
          <span>收藏</span>
          <StarBorderIcon />
        </section>
      </div>
      {/* 所有的题目，分成两个大类 1. 选择   2.填空 */}
      {/* 封装两个不同的组件，判断题目是哪个大类，进行对应组件的渲染就行了 */}
      {/* <div className="list" style={{ width: list.length * 100 + 'vw' }}>
        
        {list.map((item) => {
          // 如果是选择题，渲染选择题组件
          if (ChoiceTypes.includes(item.questionType)) {
            return <Choice key={item.id} data={item} />;
          } else {
            // 否则就渲染填空题组件
            return <Fill key={item.id} />;
          }
        })}
      </div> */}

      {/* 使用Swiper进行滑动 */}
      <Swiper onSlideChange={(swiper) => setCurIndex(swiper.activeIndex)}>
        {list.map((item) => (
          <SwiperSlide key={item.id}>
            {ChoiceTypes.includes(item.questionType) ? (
              <Choice data={item} />
            ) : (
              <Fill data={item} />
            )}
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}
